<!--  -->
<template>
   <div class='collectpage'>
    <div class="title">
      <svg width="20" height="20" viewBox="0 0 14 20.6436" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <path id="Vector" d="M1 0L13 0C13.2651 0 13.5195 0.105469 13.707 0.292969C13.8945 0.480469 14 0.734863 14 1L14 20.1431C14 20.2324 13.9761 20.3203 13.9307 20.3975C13.8857 20.4741 13.8203 20.5376 13.7422 20.5811C13.6641 20.6245 13.5757 20.646 13.4863 20.6436C13.397 20.6411 13.3096 20.6147 13.2339 20.5669L7 16.0298L0.766113 20.5659C0.69043 20.6133 0.603516 20.6401 0.51416 20.6426C0.424805 20.645 0.336426 20.6235 0.258301 20.5806C0.180176 20.5371 0.114746 20.4736 0.0693359 20.397C0.0239258 20.3198 0 20.2324 0 20.1431L0 1C0 0.734863 0.105469 0.480469 0.292969 0.292969C0.480469 0.105469 0.734863 0 1 0ZM12 2L2 2L2 17.4321L7 13.6709L12 17.4321L12 2Z" fill-rule="evenodd" fill="#000000"/>
      </svg>
      <h3>我的搜藏</h3>
    </div>
    <van-search v-model="value"   @search="goBookSearch" placeholder="请输入关键词,支持模糊查询" />
    <div class="content">
         <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="300"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
        >
          <van-row>
            <van-col span="8" v-for="(item, index) in allCollectList" :key="index" class="alitem" @click="gotoDetail(item.collect_id)">
              <img class="alitemimg" :src="item.collect_img" />
              <div class="svgicon">
                <svg t="1702456898641" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5917" width="20" height="20"><path d="M224 992 544 704 864 992 864 95.744C864 60.736 835.488 32 800.288 32L287.712 32C252.736 32 224 60.544 224 95.744L224 992Z" p-id="5918"></path></svg>
              </div>
              <p>{{ item.collect_name }}</p>
            </van-col>
          </van-row>
        </van-list>
        </div>
   </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { showCollectbook, saveClick } from '@/api/api.js'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      value: '',
      allCollectList: [],
      page: 1,
      pageSize: 30,
      // 是否处在加载状态
      loading: false,
      // 是否已加载完成
      finished: false,
      // 是否加载失败
      error: false,
      // 数据总条数
      total: 0
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    postClick (id) {
      saveClick(id)
    },
    gotoDetail (id) {
      this.postClick(id)
      this.$router.push({ path: '/bookdetail', query: { id: id } })
    },
    async getAllBook () {
      if (this.page >= 32) {
        this.finished = true
        return
      }
      await showCollectbook().then((res) => {
        if (res.code === 200) {
          if (res.data.results.length === 0) { // 判断获取数据条数若等于0
            this.allCollectList = [] // 清空数组
            this.finished = true // 停止加载
          }

          this.total = res.data.count
          this.allCollectList.push(...res.data.results)
          this.loading = false // 加载状态结束
          // 如果list长度大于等于总数据条数,数据全部加载完成
          if (this.allCollectList.length >= this.total) {
            this.finished = true // 结束加载状态
          }
        } else {
          this.error = true
        }
      })
    },
    // 被 @load调用的方法
    onLoad () { // 若加载条到了底部
      // 定时器仅针对本地数据渲染动画效果,项目中axios请求不需要定时器
      setTimeout(() => {
        this.page++// 分页数加一
        this.getAllBook()// 调用上面方法,请求数据
      }, 100)
      // this.finished = true
    },
    // 加载失败调用方法
    onRefresh () {
      this.finished = false // 清空列表数据
      this.loading = true// 将 loading 设置为 true，表示处于加载状态
      this.page = 1// 分页数赋值为1
      this.allCollectList = []// 清空数组
      this.onLoad()// 重新加载数据
    },
    async goBookSearch () {
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  }
}
</script>
<style lang='less' scoped>
.collectpage{
  width: 100%;
  height: 100%;
  .title{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 60px;
    text-align: left;
    padding-right: 20px;
    line-height: 60px;
    border-bottom: 1px solid #eee;
    h3{
      margin-left: 10px;
    }
  }
}
.alitem {
  height: 210px;
  text-align: center;
  position: relative;
  .alitemimg{
  width: 101px;
  height: 135px;
  }
  .spans{
    display: block;
    font-size: 12px;
    color: #9b9b9b;
  }
  p{
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .svgicon{
    width: 25px;
    height: 25px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    right: 16%;
    bottom: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
